<template>
	<view class="finanCenten">
		<view class="header_top" :style="{position:headerPosition,top:headerTop}">
			<view class="screen_ipt">
				<view class="Arrow_icon" :class="{red: !isshow,blue: isshow}" @click="control_show">
					<view class="screen_text">{{jinlei}}</view>
					<view class="iconfont icon-bottom-copy"></view>
				</view>
			</view>
			<view class="transparent" v-if="parent_show" >
				<view class="Mask" @click="hide_view"></view>
				<view class="frame">
					<view class="frame_Roll">
						<view class="frame_view">
							<view class="screen">快捷筛选</view>
							<view class="frame_quick">
								<view v-for="(time,index) in list" :key="index" :class="{ration:index === discolo}" @click="discoloration(index,$event)" class="list_frame" :value="time.name">{{time.name}}</view>
							</view>
						</view>
						<view class="frame_view">
							<view class="screen">按产品统计</view>
							<view class="frame_quick">
								<view v-for="(order,index) in teput" :key="index" :class="{ration:index === numdertp}" class="list_frame" @click="ordertime(index)">{{order.mite}}</view>
							</view>
						</view>
						<view class="frame_view">
							<view class="screen">自定义</view>
							<view class="custom">
								<view class="custom_view" @click="datacustom">{{start_time}}</view>
								<view class="custom_yi">一</view>
								<view class="custom_view" @click="datacustom">{{end_time}}</view>
							</view>
						</view>
					</view>
					<view class="Reset_complete">
						<view class="Reset" @click="reset">重置</view>
						<view class="complete" @click="complete">完成</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="headUl">
			<view class="headYue">
				<view>{{month.July}}</view>
			</view>
			<!-- 景点 -->
			<view class="ticketList" @click="etList(this)">
				<view class="ticketView">
					<view class="ticketTilehead">
						<image :src="Scenery.img" mode="" class="ticketImg"></image>
						<view class="dateNme">
							<view class="ticketName">{{Scenery.name}}</view>
							<view class="ticketDate">{{Scenery.data}}</view>
						</view>
					</view>
					<view class="ticketMoney">{{Scenery.symbol}}{{Scenery.numder}}</view>
				</view>
			</view>
			
			<!-- 线路 -->
			<view class="ticketList" @click="etList(this)">
				<view class="ticketView">
					<view class="ticketTilehead">
						<image :src="line.img" mode="" class="ticketImg"></image>
						<view class="dateNme">
							<view class="ticketName">{{line.name}}</view>
							<view class="ticketDate">{{line.data}}</view>
						</view>
					</view>
					<view class="ticketMoney">{{line.symbol}}{{line.numder}}</view>
				</view>
			</view>
		</view>
		<view class="headUl">
			<view class="headYue">
				<view>6月</view>
			</view>
			<!-- 酒店 -->
			<view class="ticketList" @click="etList(this)">
				<view class="ticketView">
					<view class="ticketTilehead">
						<image :src="hoeht.img" mode="" class="ticketImg"></image>
						<view class="dateNme">
							<view class="ticketName">{{line.name}}</view>
							<view class="ticketDate">{{line.data}}</view>
						</view>
					</view>
					<view class="ticketMoney">{{line.symbol}}{{line.numder}}</view>
				</view>
			</view>
			
			<!-- 佣金 -->
			<view class="ticketList" @click="etList(this)">
				<view class="ticketView">
					<view class="ticketTilehead">
						<image :src="Royalty.img" mode="" class="ticketImg"></image>
						<view class="dateNme">
							<view class="ticketName">{{Royalty.name}}</view>
							<view class="ticketDate">{{Royalty.data}}</view>
						</view>
					</view>
					<view class="ticketMoney">{{Royalty.symbol}}{{Royalty.numder}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				isshow:true,
				jinlei:'近七天',
				headerPosition:"fixed",
				headerTop:"0px",
				isActive:true,
				parent_show:false,
				start_time:'请选择',
				end_time:'请选择',
				discolo:0,
				list:[
					{index:0,name:'近15天'},
					{index:1,name:'近1个月'},
					{index:2,name:'近三个月'}
				],
				numdertp:'',
				teput:[
					{index:0,mite:'酒店订单'},
					{index:1,mite:'线路订单'},
					{index:2,mite:'景点订单'}
				],
				month:{
					July:'七月',
					June:'六月',
				},
				Scenery:{
					img:'../../../static/images/user/tickleiimages.png',
					name:'黔灵山门票黔灵山门票黔灵山门票黔灵山门票黔灵山门票',
					symbol:'-',
					numder:'1000.00',
					data:'07-22 14:52',
				},
				line:{
					img:'../../../static/images/user/lineimage.png',
					name:'黔灵山+白云公园+天河潭三日游',
					symbol:'-',
					numder:'1000.00',
					data:'07-22 14:52'
				},
				hoeht:{
					img:'../../../static/images/user/hoehtimgaes.png',
					name:'贵州海峡阳光大酒店单间',
					symbol:'-',
					numder:'1000.00',
					data:'07-22 14:52'
				},
				Royalty:{
					img:'../../../static/images/user/commission.png',
					name:'贵州海峡阳光大酒店单间',
					symbol:'+',
					numder:'50.00',
					data:'07-22 14:52'
				}
			}
		},
		onShow(options) {
			console.log(options);
			var finance_date = uni.getStorageSync("user_form");
			this.start_time = finance_date.startDate.year+"-"+finance_date.startDate.month+"-"+finance_date.startDate.day;
			this.end_time = finance_date.endDate.year+"-"+finance_date.endDate.month+"-"+finance_date.endDate.day;
			this.count_time =  finance_date.countDays;
		},
		onLoad(options) {
			//兼容H5下排序栏位置
			// #ifdef H5
				let Timer = setInterval(()=>{
					let uniHead = document.getElementsByTagName('uni-page-head');
					if(uniHead.length>0){
						this.headerTop = uniHead[0].offsetHeight+'px';
						clearInterval(Timer);//清除定时器
					}
				},1);
			// #endif
			
		},
		methods:{
			datacustom(){
				uni.navigateTo({
					url:'calendar'
				})
			},
			etList(t){
				uni.navigateTo({
					url:'detailed'
				})
			},
			
			// 点击筛选显示隐藏
			control_show(){
				this.parent_show = !this.parent_show;
				if(this.parent_show == true){
					this.isshow = false;
				}else{
					this.isshow = true;
				}
				
			},
			
			// 点击遮罩层也可以关闭
			hide_view(){
				console.log(123)
				let chti = false;
				this.parent_show = chti;
				if(this.parent_show == true){
					this.isshow = false;
				}else{
					this.isshow = true;
				}
			},
			
			// 完成按钮
			complete(){
				let chti = false;
				this.parent_show = chti;
				this.jinlei = this.list[this.discolo].name;
				if(this.parent_show == true){
					this.isshow = false;
				}else{
					this.isshow = true;
				}
			},
			
			// 快捷筛选
			discoloration(index){
				this.discolo = index;
				console.log(this.discolo)
			},
			
			
			// 日期选择
			pingys(index){
				this.pin = index;
				console.log(this.pin)
			},
			
			// 按产品统计
			ordertime(index){
				this.numdertp = index;
				console.log(this.numdertp)
			},
			
			// 重置
			reset(){
				this.yifenx = '';
				this.numdertp = '';
				this.discolo = '';
				this.pin = '';
			}
		}
	}
</script>

<style>
	.finanCenten{
		padding-top: 45px;
	}
	.custom{
		display: flex;
		justify-content: space-around;
	}
	.custom_view{
		font-size: 32upx;
		color: #333;
		margin: 20upx 0;
	}
	.custom_yi{
		font-size: 32upx;
		color: #333;
		margin: 20upx 0;
	}
	.red {
		color: #8475da;
		font-size: 14px;
	}
	.blue {
		color: #777;
		font-size: 20px;
	}
	
	.header_top{
		width: 100%;
		background: #fff;
		z-index: 999;
	}
	.ration{
		background: #ff4800!important;
		color: #fff!important;
	}
	.month_head{
		padding-top: 88upx;
	}
	.Mask{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.5);
	}
	.transparent{
		width: 100%;
		height: 100vh;
		position: relative;
		left: 0;
	}
	.icon-bottom-copy{
		font-size: 38upx;
		/* color: #777; */
	}
	.Arrow_icon{
		display: flex;
	}
	.screen_text{
		font-size: 32upx;
		/* color: #777; */
	}
	.screen_sous{
		font-size: 32upx;
		color: #777;
	}
	.screen_ipt view{
		line-height: 50upx;
	}
	.screen_ipt{
		width: 92%;
		display: flex;
		justify-content: center;
		padding: 20upx 4%;
	}
	.frame_view{
		margin-bottom: 30upx;
	}
	.screen{
		color: #333;
		font-size: 32upx;
	}
	.list_frame{
		color: #333;
		background: #f6f6f6;
	}
	.frame_quick view{
		font-size: 30upx;
		text-align: center;
		margin: 15upx 3% 15upx 0upx;
		padding: 0 2.5%;
		border-radius: 10upx;
		line-height: 70upx;
		min-width: 25%;
	}
	.frame_quick{
		display: flex;
		flex-wrap:wrap;
	}
	.Reset_complete{
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		display: flex;
	}
	.Reset_complete view{
		width: 50%;
		line-height: 88upx;
		text-align: center;
		font-size: 30upx;
	}
	.Reset{
		color: #8475da;
		background: #e8e4ff;
	}
	.complete{
		color: #fff;
		background: #8475da;
	}
	.frame{
		position: relative;
		padding: 26upx 3% 88upx 3%;
		width: 94%;
		background: #fff;
		
	}
	
	.headYue{
		width: 100%;
		height: 80upx;
		padding: 26upx  0upx 0upx 28upx;
		background: #efefef;
	}
	.headYue view{
		width: 100upx;
		height: 50upx;
		line-height: 49upx;
		padding: 0;
		font-size: 28upx;
		background: #fff;
		color: #333;
		text-align: center;
		border-radius: 40upx;
	}
	.ticketImg{
		width: 50upx;
		height: 50upx;
		border-radius: 50%;
		margin-top:4upx;
	}
	.ticketName{
		font-size: 32upx;
		color: #333;
		width: 90%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;

	}
	.dateNme{
		width: 85%;
	}
	.ticketDate{
		font-size: 28upx;
		color: #999;
	}
	.ticketMoney{
		font-size: 32upx;
		color: #ff1e00;
		width: 35%;
		text-align: right;
	}
	.ticketTilehead{
		display: flex;
		justify-content: space-between;
		width: 68%;
	}
	.ticketView{
		display: flex;
		justify-content: space-between;
		border-bottom: 1upx solid #efefef;
		padding: 16upx 0;
	}
	.ticketList{
		padding: 0upx 28upx;
		margin-bottom: 20upx;
	}
</style>
